<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar">
      <template #title>
        <div class="title-box">
          <van-button
            class="search-btn"
            type="info"
            size="small"
            round
            icon="search"
          >
            搜索
          </van-button>
          <van-icon name="wap-nav" @click="isShowChannelEditPopup = true" />
        </div>
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->

    <!-- 不能直接使用 v-model 绑定 vuex 中的 state，因为只有 mutation 才有权利修改 state -->
    <!-- 这里可以借助计算属性的完整写法 -->
    <van-tabs v-model="active">
      <van-tab
        v-for="v of $store.state.channel.curUserChannels"
        :key="v.id"
        :title="v.name"
      >
        <div class="channel-content-box">
          <ArticleList />
        </div>
      </van-tab>
    </van-tabs>

    <!-- 编辑频道弹出层 -->
    <van-popup
      v-model="isShowChannelEditPopup"
      closeable
      position="left"
      :style="{ width: '100%', height: '100%' }"
    >
      <div class="channel-edit-container">
        <div class="my-channel">
          <div class="header">
            <div class="title">
              <div class="main">我的频道：</div>
              <div class="desc">点击进入频道</div>
            </div>
            <div class="edit-btn">编辑</div>
          </div>
          <div class="list">
            <div class="item active">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
          </div>
        </div>
        <div class="recommend-channel">
          <div class="header">
            <div class="title">
              <div class="main">我的频道：</div>
            </div>
          </div>
          <div class="list">
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
            <div class="item">频道名称</div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import ArticleList from './components/ArticleList/index'
export default {
  name: 'HomePage',
  components: { ArticleList },
  data() {
    return {
      isShowChannelEditPopup: false,
      // 这个属性可能在频道编辑中还要使用，所以干脆放到 Vuex 中去
      // active: 0,
    }
  },
  computed: {
    // 计算属性的完整写法
    active: {
      get() {
        return this.$store.state.channel.active
      },
      set(newValue) {
        this.$store.commit('channel/changeActive', newValue)
      },
    },
  },
  created() {
    this.$store.dispatch('channel/loadCurUserChannels')
    // this._apis.channel.getCurUserChannels().then(res => {
    //   console.log(res, 'res')
    // })
  },
}
</script>

<style scoped lang="less">
.home-container {
  // background-color: #fff;

  .channel-edit-container {
    padding-top: 100px;
    .my-channel,
    .recommend-channel {
      .header {
        padding: 0 28px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
          display: flex;
          align-items: center;
          .main {
            font-size: 36px;
          }
          .desc {
            font-size: 24px;
            color: #b7a9a9;
          }
        }
        .edit-btn {
          border: 1px solid #fc8b5c;
          border-radius: 62px;
          padding: 5px 40px;
          color: #fc8b5c;
          font-size: 26px;
          cursor: pointer;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          position: relative;
          background-color: #f7f8fa;
          font-size: 30px;
          padding: 20px;
          border-radius: 50px;
          margin: 20px 0 0 20px;
          // &代表上级选择器
          &.active {
            color: #fc8b5c;
          }
        }
      }
    }
    .my-channel {
      .list {
        .item {
          &::after {
            position: absolute;
            top: -10px;
            right: -10px;
            content: '+';
            display: block;
            background-color: #bfc2cb;
            width: 30px;
            height: 30px;
            line-height: 30px;
            font-size: 40px;
            border-radius: 50%;
            text-align: center;
            color: #fff;
            padding: 2px;
            transform: rotate(45deg);
          }
        }
      }
    }
    .recommend-channel {
      margin-top: 60px;
    }
  }

  .channel-content-box {
    height: calc(100vh - 280px);
    overflow-y: auto;
  }

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 40px;
    i {
      font-size: 56px;
    }
  }

  /deep/.van-tabs__line {
    background-color: #3296fa;
  }

  // /deep/ 是样式穿透语法，如果 style 标签添加了 scoped，那么该组件的样式会隔离（给每个元素添加一个随机的自定义属性 data-v-xxx）
  // 什么时候需要使用样式穿透呢？
  // -- 当 当前组件的模板中 找不到该元素，是某个子组件内部的元素，那么就需要使用样式穿透
  /deep/.van-nav-bar__title {
    max-width: unset;
    width: 100%;
  }
  .search-btn {
    width: 555px;
    height: 64px;
    background-color: #5babfb;
    border: none;
    font-size: 28px;
    .van-icon {
      font-size: 32px;
    }
  }
}
</style>
